<template>
  <div class="modal-custom-base-wrap">
    <modal_relative_news_choose ref="modal_relative_news_choose" />

    <el-dialog
      :title="modalTitle"
      width="1200px"
      custom-class="modal-custom-base"
      :close-on-click-modal="false"
      :visible.sync="show"
      :before-close="onModalClose"
    >
      <div class="modal-ctx-wrap">
        <div class="modal-ctx" v-loading="loading">
          <div class="action-box">
            <div class="action-left">
              <div class="filter-item">
                <el-button size="small" type="primary" @click="other_choose()"
                  >关联其他</el-button
                >
              </div>
            </div>
            <div class="action-right">
              <el-button size="small" type="danger" @click="product_remove_checked()"
                >移除选中</el-button
              >
            </div>
          </div>

          <div class="table-box">
            <el-table
              ref="multipleTable"
              :data="newsList"
              fit
              stripe
              border
              highlight-current-row
              min-width="100px"
              style="width: 100%"
              @selection-change="handleSelectionChange1"
            >
              <el-table-column type="selection" width="40"> </el-table-column>
              <!-- 数据循环体 -->

              <template v-for="(item, index) in tableColumns">
                <el-table-column
                  v-if="item.type == 'image'"
                  :key="index + item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                  :sortable="item.custom"
                  :show-overflow-tooltip="item.show_overflow_tooltip"
                >
                  <template slot-scope="scope">
                    <div class="table-image-list">
                      <template v-if="item.colFormat == 'jsonObjectArray'">
                        <div
                          class="table-image-item"
                          v-for="(sub, subindex) in scope.row[item.prop]"
                          :key="subindex"
                        >
                          <!-- <img :src="item.image" alt="" /> -->
                          <el-image
                            style="width: 50px; height: 50px"
                            :src="sub.url"
                            :preview-src-list="scope.row[item.prop].map((v) => v.url)"
                          >
                          </el-image>
                        </div>
                      </template>
                      <template v-else>
                        <div class="table-image-item">
                          <!-- <img :src="item.image" alt="" /> -->
                          <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row[item.prop]"
                            :preview-src-list="[scope.row[item.prop]]"
                          >
                          </el-image>
                        </div>
                      </template>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  v-else
                  :key="index + item.prop"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                  :sortable="item.custom"
                  :show-overflow-tooltip="item.show_overflow_tooltip"
                >
                </el-table-column>
              </template>

              <!-- 数据循环体 -->

              <el-table-column fixed="right" label="操作" width="50px">
                <template slot-scope="scope">
                  <el-link type="primary" @click="product_move_out([scope.row])"
                    >移出</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- v-if="false" -->
          <div class="pagination-box">
            <div class="page-left">
              <el-checkbox
                v-model="checkedAll"
                @change="changeAll"
                style="margin-right: 30px"
                >全选</el-checkbox
              >
              <!-- <el-button type="primary" @click="product_remove_checked">移除选中</el-button> -->
              <el-link type="danger" @click="product_remove_checked">移除选中</el-link>
            </div>
            <div class="page-right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-size="pagination.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
              >
              </el-pagination>
              <!-- <el-button type="" @click="show = false">关闭</el-button> -->
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer" v-if="false">
        <el-button @click="show = false">关闭</el-button>
        <!-- <el-button type="primary" @click="form_submit()">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import modal_relative_news_choose from "@/components/modals/modal_relative_news_choose.vue";

import { mapState } from "vuex";
export default {
  name: "modal-hetong",
  components: {
    modal_relative_news_choose,
  },
  props: {},
  data() {
    return {
      show: false,
      pageActionType: "",
      modalTitle: "",
      pageData: {},
      otherQueryParams: {},
      detail: {},

      newsList: [],

      //
      show: false,
      loading: false,
      id: "",
      title: "",
      image_poster: "",
      file_poster: "",

      // 产品列表
      all_list_product: [],
      list_product: [],

      checkedAll: false,
      select_items: [],

      pagination: {
        page: 1,
        pagesize: 10,
      },
      count: 0,

      // 相关新闻
      tableColumns: [
        {
          prop: "newsTitle",
          label: "标题",
          width: "auto",
          sortable: false, //是否可排序
          show_overflow_tooltip: false, //悬浮是否展示提示
        },
        {
          prop: "newsCover",
          label: "图片",
          width: "auto",
          sortable: false,
          type: "image",
          colFormat: "jsonObjectArray",
        },
        {
          prop: "channelName",
          label: "所属分类",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
        },
        // {
        //   prop: "newsType",
        //   label: "新闻类型",
        //   width: "auto",
        //   sortable: false,
        //   show_overflow_tooltip: false,
        // },
        {
          prop: "keyWords",
          label: "关键字",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: false,
        },

        {
          prop: "createTime",
          label: "发布时间",
          width: "auto",
          sortable: false,
          show_overflow_tooltip: true,
        },
      ],

      targetKey: "",
      targetId: "",
    };
  },
  computed: {
    // modal_title() {
    //   return "回复列表";
    // },
  },
  watch: {
    show(val) {
      if (!val) {
        this.pageActionType = "";
        this.modalTitle = "";
        this.pageData = {};
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    async init(option) {
      console.warn("初始参数 [option]", JSON.parse(JSON.stringify(option)));
      option = JSON.parse(JSON.stringify(option));

      let {
        //
        pageActionType,
        modalTitle,
        data,
        targetKey,
        targetId,
        otherQueryParams,
      } = option;

      this.pageActionType = pageActionType;
      this.modalTitle = modalTitle;
      this.pageData = data;
      this.targetKey = targetKey;
      this.targetId = targetId;
      this.otherQueryParams = otherQueryParams;

      this.show = true;

      this.setView();
    },

    setView() {
      this.$api({
        url: "/app/news/information/list",
        method: "get",
        data: {
          ...this.otherQueryParams,
        },
      }).then((res) => {
        // console.warn("新闻详情", res);
        if (res.code == 200) {
          let dataList = res.rows;

          let colFormatItem = this.tableColumns.find((v) => v.colFormat);
          if (colFormatItem) {
            if (colFormatItem.colFormat == "jsonObjectArray") {
              dataList.forEach((v) => {
                if (v[colFormatItem.prop]) {
                  try {
                    v[colFormatItem.prop] = JSON.parse(v[colFormatItem.prop]);
                  } catch (error) {
                    v[colFormatItem.prop] = [];
                  }
                } else {
                  v[colFormatItem.prop] = [];
                }
                // console.warn("表格行", { ...v });
              });
            }
          }

          this.newsList = dataList;
        }
      });
    },

    onModalClose() {
      this.show = false;
    },

    //  补充逻辑
    //  补充逻辑
    //  补充逻辑
    //  补充逻辑

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.pagination.pagesize = val;
      // this.setView();

      let start = (this.pagination.page - 1) * this.pagination.pagesize;
      let end = this.pagination.page * this.pagination.pagesize;
      this.list_product = this.all_list_product.slice(start, end);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      // this.setView();

      let start = (this.pagination.page - 1) * this.pagination.pagesize;
      let end = this.pagination.page * this.pagination.pagesize;
      this.list_product = this.all_list_product.slice(start, end);
    },

    changeAll(val) {
      console.log("全选", val);
      if (val) {
        // let items = this.list_product;
        // this.toggleSelection(items);
        // this.$refs.multipleTable.toggleRowSelection(items, true);
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange1(items) {
      console.log("已选产品", items);
      this.select_items = items;
    },

    product_choose_callback(items) {
      console.log("父组件接收产品选择", items);
      // this.list_product_all.push(...items);
    },

    //产品选择
    other_choose() {
      this.$refs.modal_relative_news_choose.init({
        targetKey: this.targetKey,
        targetId: this.targetId,
        otherQueryParams: this.otherQueryParams,
      });
    },

    //移除产品
    product_move_out(items) {
      console.log("移除产品", items);

      // let id_ar = items.map((v) => v.id);
      // let ids = id_ar.join();

      // let formData = new FormData();
      // formData.append("ids", ids);

      // this.$api("adminDeleteCateProduct", formData).then((res) => {
      //   console.log("移除产品", res);
      //   let { code, data } = res;
      //   alert(res);
      //   if (res.code == 0) {
      //     // this.show = false;
      //     this.setView();
      //   }
      // });
    },
    product_remove_checked() {
      this.product_move_out(this.select_items);
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .modal-custom-base {
  margin-top: 50px !important;

  .el-dialog__header {
    .flex-between();
    border-bottom: 1px solid #eee;
    // background: #a98c4d;
    // background: #f7f7f7;
    // height: 50px;
    // line-height: 50px;
    // padding: 0 15px;
    // font-size: 14px;
    // color: #333;

    .el-dialog__title {
      color: #000;
    }
    .el-dialog__headerbtn {
      // top: 0;
      .el-dialog__close {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: 30px 40px;
    padding: 0px 15px;
    max-height: calc(100vh - 100px - 150px);
    overflow-y: auto;
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      border: 8px solid #409eff;
      background: #fff;
    }
    &::-webkit-scrollbar {
      width: 8px;
      height: 0px;
    }
  }

  .el-dialog__footer {
    // text-align: center;
    border-top: 1px solid #eee;
  }
}

.modal-ctx {
  // padding: 30px 50px;
  // max-height: 60vh;
  // overflow-y: auto;
  // border-bottom: 1px solid #ddd;
}

// 处理表单样式
/deep/ .el-upload {
  // width: auto;
}

/deep/ .el-upload-list__item {
  // padding: 0 10px;
  // height: 32px;
  // line-height: 32px;
  background: #eef6ff !important;
  font-size: 16px;
}

.pagination-box {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px solid #eee;
}

.table-box {
  height: 500px;
  overflow-y: auto;
}

.modal-ctx {
  padding: 0;
  // max-height: 60vh;
  // overflow-y: auto;
  // border-bottom: 1px solid #ddd;

  .action-box {
    text-align: left;
    // padding-bottom: 15px;
  }

  .action-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
    .action-left {
      display: flex;
      align-items: center;

      .filter-item {
        margin-right: 20px;
      }
    }
    .action-right {
    }
  }

  .tip {
    margin-bottom: 20px;
    color: #444;
    font-size: 14px;
  }

  .input-box {
    margin-bottom: 15px;

    &.flex {
      display: flex;
      align-items: flex-start;

      .label {
        margin-bottom: 0;
        text-align: left;
        padding-top: 5px;
      }
    }

    .label {
      min-width: 100px;
      margin-right: 20px;
      margin-bottom: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      color: #6e7285;
    }

    .input-item {
      text-align: left;
      width: 600px;
    }

    .el-input {
      min-width: 300px;
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }
}
</style>
